<template>
    <h2>当前sum:{{ sum }}</h2>
    <h2>只读sum:{{ sum_readonly }}</h2>
    <el-button type="success" @click="updateData">累加sum</el-button>
    <el-button type="success" @click="updateReadonlyData">累加只读sum</el-button>
    <p>readonly：用于创建一个对象的深层次只读副本。</p>
    <p>shallowReadonly：用于创建一个对象顶层属性的只读副本。</p>
    <p>为了对数据的保护，修改源数据依然是响应式的。</p>
</template>

<script lang="ts" setup name="Readonly">
import { readonly, ref } from 'vue';


let sum = ref(0)
let sum_readonly = readonly(sum)
function updateData() {
    sum.value++
}
function updateReadonlyData() {
    sum_readonly.value++ //不能修改，会有警告
}
</script>

<style scoped>
</style>